/**
 *  学习目标：Todos 案例
 */
 import React,{useEffect, useState} from 'react';
 import './styles/base.css';
 import './styles/index.css';
 const initList=[
  {
    id: 1,
    task: '学习Vue',
    isDone: true,
  },
  {
    id: 2,
    task: '学习React',
    isDone: false,
  },
  {
    id: 3,
    task: '学习ts',
    isDone: false,
  },
]
 
 export default function App() {
   // 2.1 App中声明状态list和初始数据
   // 11.3 初始化时从缓存中取出数据
   const [list, setList] = useState(JSON.parse(localStorage.getItem('todo-list'))||initList)
   // 9.1 声明type的状态
   const [type, setType] = useState('all') // all  completed  active
   // 11.1 useEffect + 依赖项,监听数据变化
   useEffect(() => {
     // 11.2 更新后的值，存入缓存
     localStorage.setItem('todo-list',JSON.stringify(list))
     localStorage.setItem('type',type)
   }, [list,type])
   
   // 10.1 定义计算属性showList，🔔 计算属性在函数组件中，写在和return同级
   const newShowList=list.filter((item)=>{
     //   active
     if(type==='active') return !item.isDone
     // completed
     if(type==='completed') return item.isDone
     // all
     return item
   })
   // 6.1 在App中定义新增方法
   const handleAdd=(task)=>{
     // 6.5 在新增方法中完成新增逻辑
     const newTask={
         isDone:false,
         id:Date.now(),
         task
     }
     setList([...list,newTask])
   }
   // 4.1 定义删除方法
   const handleDelById=(id)=>{
     const newList=list.filter((item)=>{
         if(item.id!==id) return item
     })
     setList(newList)
   }
   // 3.1. App中定义更新方法
   const handleUpdateById=(id)=>{
       // 3.4. 编写更新的逻辑
     const newList=list.map((item)=>{
         return{
             ...item,
             isDone:item.id===id?!item.isDone:item.isDone
         }
     })
     setList(newList)
   }
   // 2.2 通过父传子传递props.list
   return (
     <section className="todoapp">
         {/* 头部 */}
         <Header 
         // 6.2 父传子Header回调函数
         handleAdd={handleAdd}/>
         {/* 主体 */}
          {/* 3.2 父传子Main接收回调 */}
          {/* 10.2 传给Main组件替换list */}
         <Main list={newShowList} handleUpdateById={handleUpdateById}  // 4.2 父传子
         handleDelById={handleDelById}/>
         {/* 底部 */}
         {/* 9.2 父传子 */}
       {/* 9.4 子传父技术-传setType函数 */}
         <Footer type={type} setType={setType}/>
       </section>
   )
 }
 
 function Footer({type,setType}) {
   return <footer className="footer">
     <span className="todo-count">
       <strong>1</strong> 剩余
     </span>
     <ul className="filters">
         {/* 9.3 使用type做排它判断，给a标签设置selected类名 */}
       <li>
           {/* 9.5 通过onClick调用setType修改type的值 */}
         <a 
          onClick={()=>setType('all')} className={type==='all'? "selected":""} href="#/">
           全部
         </a>
       </li>
       <li>
         <a onClick={()=>setType('active')} className={type==='active'?"selected":""} href="#/active">
           未完成
         </a>
       </li>
       <li>
         <a onClick={()=>setType('completed')} className={type==='completed'?"selected":""} href="#/completed">
           已完成
         </a>
       </li>
     </ul>
     <button className="clear-completed">清除已完成</button>
   </footer>;
 }
 
 function Main({list,handleUpdateById,handleDelById}) {
   return <section className="main">
     <input id="toggle-all" className="toggle-all" type="checkbox" />
     <label htmlFor="toggle-all">全选</label>
     {/* // 2.3 列表渲染任务 */}
     <ul className="todo-list">
       {list.map((item)=>(
         // 2.4 动态class的设置
         <li className={item.isDone?"completed":""} key={item.id}>
         <div className="view">
           <input className="toggle" type="checkbox" 
           //  3.3 Main中选框触发回调
           onChange={()=>handleUpdateById(item.id)}
           // 💥 记得添上checked属性
           checked={item.isDone}/>
           <label>{item.task}</label>
           <button className="destroy" 
           // 4.3 点击触发回调
           onClick={()=>handleDelById(item.id)}></button>
         </div>
       </li>
       ))}
     </ul>
   </section>;
 }
 
 function Header({handleAdd}) {
     const [task, setTask] = useState('')
     const handleKeyDown=(e)=>{
         if(e.keyCode===13){
             handleAdd(task)
             // 6.4 新增后清空输入框的内容
             setTask('')
         }
     }
   return <header className="header">
     <h1>todos</h1>
     <input 
      // 5.1 state控制value或checked
     value={task}
     className="new-todo" placeholder="需要做什么" autoFocus 
     // 5.2 onChange配setState
     onChange={(e)=>setTask(e.target.value)}
     // 6.3 监听键盘事件，回车事件时触发新增方法
     onKeyDown={handleKeyDown}
     />
   </header>;
 }
 
 